<template>
	<view class="content">
		<view class="content-top">
			<view class="cell-group margin-cell-group" style="margin:20rpx 30rpx;border-radius: 25rpx;"
				@click="showAddressList">
				<view class="cell-item add-title-item right-img cell-item-mid"
					style="background-color: transparent;padding: 25rpx 20rpx;">
					<view class="cell-item-bd cell-item-bd-block">
						<view class="cell-bd-view">
							<view class="cell-item-hd">
								<image src="/static/dw.png" style="width: 24upx;height: 29upx;">
								</image>
							</view>
							<text class="cell-bd-text address"
								style="color: #fff;font-size: 27rpx;">{{ orderInfo.ship_area_name || '' }}
							</text>
						</view>
						<view style="margin-left: 34rpx;color: #b9b9b9;font-size: 27rpx;">
							{{orderInfo.ship_address}}
						</view>
						<view class="cell-bd-view">
							<view class="cell-bd-text" style="font-size: 27rpx;color: #999999;margin-left: 34rpx;">
								{{ orderInfo.ship_name || '' }} {{ orderInfo.ship_mobile || '' }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="img-list" style="margin: 0 30rpx;background-color: #202126;border-radius: 25rpx;">
				<view class="img-list-item" v-for="(item, index) in orderInfo.items" :key="index"
					style="display: flex;padding: 20upx;border-bottom: 1rpx solid #D4D4D4;"
					@click="goodsDetail(item.goods_id)">
					<image class="img-list-item-l little-img have-none" :src="item.image_url"
						style="width: 216upx;height: 216upx;border-radius: 25rpx;"></image>
					<view class="img-list-item-r little-right" style="flex:1;">
						<view class="little-right-t">
							<view class="goods-name list-goods-name" @click="goodsDetail(item.goods_id)">
								<text class="gift" v-if="item.type == 7">[赠品]</text>
								{{ item.name || '' }}
							</view>
						</view>
						<view class="goods-item-c">
							<view class="goods-buy">
								<view class="goods-salesvolume" style="margin: 16rpx 0 36rpx 0;"
									v-if="item.addon !== null">
									{{ item.addon || '' }}
								</view>

							</view>
							<view style="display: flex;align-items: center;justify-content: space-between;">
								<view class="goods-price" v-if="item.type != 7"
									style="font-weight: bold;font-size: 36rpx;color: #F2D7AAFF;"><text
										style="font-size: 24rpx;">￥</text>{{ item.price || '0.00' }}
										<text v-show="item.buypoint > 0">+{{item.buypoint}}购物积分</text>
								</view>
								
							</view>
							<view class="goods-num" style="font-size: 28upx;color: #F2D7AAFF;font-weight: bold;">×
								{{ item.nums || '' }}
							</view>
						</view>
					</view>
				</view>
				<view style="padding: 20upx 27upx;display: flex;align-items: center;color:#fff">
					买家留言
					<input disabled :placeholder="orderInfo.memo" style="text-align:right;flex:1"
						placeholder-style="font-size:24rpx" />
				</view>
			</view>

			<view class="cell-group" style="margin: 20rpx 30rpx;border-radius: 25rpx;padding: 20rpx;">
				<view>
					<view style="color:#202126FF;font-size: 28rpx;font-weight: bold;margin-bottom: 20rpx;">
						价格明细
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="cell-bd-view">商品总价</view>
					<view style="color: #fff;" v-if="orderInfo.order_type != 7"><text>￥</text>{{ orderInfo.goods_amount || '' }}
					
					<text v-show="orderInfo.buypoint > 0">+{{orderInfo.buypoint}}购物积分</text>
					</view>
					<view style="color: #fff;" v-else>{{ orderInfo.goods_amount || '' }}<text>出局积分</text></view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;" v-show="orderInfo.zeng_point > 0">
					<view class="cell-bd-view">获得积分</view>
					<view style="color:#fff">{{orderInfo.zeng_point || ''}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="cell-bd-view">合计</view>
					<view class="cell-ft-view" style="color:#F2D7AAFF;" v-if="orderInfo.order_type != 7">
						<text>￥</text>{{ orderInfo.goods_amount || '' }}
						<text v-show="orderInfo.buypoint > 0">+{{orderInfo.buypoint}}购物积分</text>
					</view>
					<view class="cell-ft-view" style="color:#F2D7AAFF;" v-else>
						{{ orderInfo.goods_amount || '' }}<text>出局积分</text>
					</view>
				</view>

			</view>
		</view>
		<view class="button-bottom"
			style="display: flex;align-items: center;justify-content: space-between;height: 166rpx;box-shadow: none;"
			v-if="orderInfo.status == 1 || orderInfo.status == 2">
			<view class="Left" style="font-size: 36rpx;font-weight: bold;color: #fff;"
				v-if="orderInfo.status == 1 && orderInfo.pay_status == 1 && orderInfo.ship_status == 1">
				合计:
				<text style="color: #F2D7AAFF;"  v-if="orderInfo.order_type != 7"><text>￥</text>{{ orderInfo.goods_amount || '' }}</text>
				<text style="color: #F2D7AAFF;" v-else>{{ orderInfo.goods_amount || '' }}<text>出局积分</text></text>
			</view>
			<view class="Left" style="flex: 1;" v-else>

			</view>
			<view class="Right">
				<button class='btn btn-circle btn-g' hover-class="btn-hover"
					v-if="orderInfo.status == 1 && orderInfo.pay_status == 1 && orderInfo.ship_status == 1"
					@click="cancelOrder(orderInfo.order_id)"
					style="background: #000;font-size: 36rpx;color: #FFFFFF;border: none;border-radius: 10rpx;">取消订单</button>
				<button class='btn btn-circle btn-w' hover-class="btn-hover"
					v-if="orderInfo.status == 1 && orderInfo.pay_status == 1" @click="toPay(orderInfo.order_id)"
					style="background: #F2D7AAFF;font-size: 36rpx;color: #000;border: none;border-radius: 10rpx;">立即支付</button>
				<button class='btn btn-circle btn-w' hover-class="btn-hover"
					v-if="orderInfo.status == 1 && orderInfo.pay_status >= 2 && orderInfo.ship_status >= 3 && orderInfo.confirm == 1"
					@click="tackDeliery(orderInfo.order_id)">确认收货</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orders,
		goods,
		tools
	} from '@/config/mixins.js'
	export default {
		mixins: [orders, goods, tools],
		data() {
			return {
				orderId: 0,
				orderInfo: {}, // 订单详情
				teamInfo: [], //拼团团信息
				lading: {
					status: false,
					code: ''
				}, //提货信息
				tipsShow: false
			}
		},
		onLoad(options) {
			this.orderId = options.order_id
			if (this.orderId) {
				//this.orderDetail()
			} else {
				this.$common.errorToShow('', () => {
					uni.navigateBack({
						delta: 1,
					})
				})
			}
		},
		onShow() {
			this.orderDetail();
		},
		computed: {
			// 判断是否发货
			isDelivery() {
				if (this.orderInfo && this.orderInfo.delivery && Object.keys(this.orderInfo.delivery).length) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			// 获取订单详情
			orderDetail() {
				let _this = this
				let data = {
					order_id: _this.orderId
				}
				_this.$api.orderDetail(data, function(res) {
					if (res.status) {
						let data = res.data
						// 订单状态文字转化
						switch (data.status) {
							case 1:
								if (data.pay_status === 1) {
									_this.$set(data, 'status_name', '待付款')
								} else if (data.pay_status >= 2 && data.ship_status === 1) {
									_this.$set(data, 'status_name', '待发货')
								} else if (data.pay_status >= 2 && data.ship_status === 2) {
									_this.$set(data, 'status_name', '部分发货')
								} else if (data.pay_status >= 2 && data.ship_status >= 3 && data.confirm === 1) {
									_this.$set(data, 'status_name', '已发货')
								} else if (data.pay_status >= 2 && data.ship_status >= 3 && data.confirm >= 2 &&
									data.is_comment === 1) {
									_this.$set(data, 'status_name', '已完成')
								} else if (data.pay_status >= 2 && data.ship_status >= 3 && data.confirm >= 2 &&
									data.is_comment >= 2) {
									_this.$set(data, 'status_name', '已评价')
								}
								break
							case 2:
								_this.$set(data, 'status_name', data.text_status)
								break
							case 3:
								_this.$set(data, 'status_name', data.text_status)
								break
						}
						// 订单时间转换
						data.ctime = _this.$common.timeToDate(data.ctime)

						// 支付时间转换
						if (data.payment_time !== null) {
							data.payment_time = _this.$common.timeToDate(data.payment_time)
						}

						// 转换优惠信息
						if(data.items[0].promotion_list)
						{
							for (let i in data.items) {
								data.items[i].promotion_list = JSON.parse(data.items[i].promotion_list);
							}
						}
						

						_this.orderInfo = data;

						_this.orderInfo.delivery.forEach(item => {
							item.ctime = _this.$common.timeToDate(item.ctime)
						})
						//判断是否拼团
						if (data.order_type == 2) {
							_this.getTeam(data.order_id);
						}

						if (data.ladingItem[0]) {
							_this.lading = {
								status: true,
								code: data.ladingItem[0].id
							}
						}
					} else {
						_this.$common.errorToShow(res.msg)
					}
				})
			},
			// 取消订单
			cancelOrder(orderId) {
				this.$common.modelShow('提示', '确认要取消订单吗?', () => {
					let data = {
						order_ids: orderId
					}

					this.$api.cancelOrder(data, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, () => {
								this.orderDetail()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			// 确认收货
			tackDeliery(orderId) {
				this.$common.modelShow('提示', '确认收货操作吗?', () => {
					let data = {
						order_id: orderId
					}
					this.$api.confirmOrder(data, res => {
						if (res.status) {
							this.$common.successToShow('确认收货成功', () => {
								// 更改订单列表页的订单状态
								let pages = getCurrentPages(); // 当前页
								let beforePage = pages[pages.length - 2]; // 上个页面
								if (beforePage !== undefined && beforePage.route ===
									'pages/member/order/orderlist') {
									// #ifdef MP-WEIXIN
									beforePage.$vm.isReload = true
									// #endif

									// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE
									beforePage.isReload = true
									// #endif

									// #ifdef MP-ALIPAY || MP-TOUTIAO
									this.$db.set('order_user_ship', true, true);
									// #endif
								}

								this.orderDetail()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			// 申请售后
			customerService(id) {
				this.$common.navigateTo('/pages/member/after_sale/index?order_id=' + id);
			},
			//快递信息
			logistics(key) {
				let address1 = this.orderInfo.ship_area_name ? this.orderInfo.ship_area_name : ''
				let address2 = this.orderInfo.ship_address ? this.orderInfo.ship_address : ''
				let address = address1 + address2
				this.showExpress(this.orderInfo.delivery[key].logi_code, this.orderInfo.delivery[key].logi_no, address)
			},
			//查看售后
			showCustomerService(info) {
				//console.log(info)
				if (info.aftersalesItem.length == 1) {
					this.$common.navigateTo('/pages/member/after_sale/detail?aftersales_id=' + info.bill_aftersales_id);
				} else if (info.aftersalesItem.length > 1) {
					this.$common.navigateTo('/pages/member/after_sale/list?order_id=' + info.order_id);
				}
			},
			goInvition() {
				uni.navigateTo({
					url: '/pages/member/order/invitation_group?order_id=' + this.orderInfo.order_id +
						'&close_time=' + this.teamInfo.close_time
				})
			},
			//拼团信息
			getTeam(id) {
				this.$api.getOrderPintuanTeamInfo({
					order_id: id
				}, res => {
					if (res.status) {
						this.teamInfo = {
							list: res.data.teams,
							current_count: res.data.teams.length,
							people_number: res.data.people_number,
							team_nums: res.data.team_nums, //剩余
							close_time: res.data.close_time, //关闭时间
							id: res.data.id, //拼团id
							team_id: res.data.team_id, //拼团团队id
							rule_id: res.data.rule_id,
							status: res.data.status
						};
					} else {
						this.$common.errorToShow(res.msg)
					}

				});
			},
			goTaxList() {
				if (this.orderInfo && this.orderInfo.invoice && this.orderInfo.invoice.id) {
					uni.navigateTo({
						url: '/pages/member/invoice/index?id=' + this.orderInfo.invoice.id
					});
				}
			},
			tips() {
				if (this.tipsShow) {
					this.$refs.cover.close();
					this.tipsShow = false;
				} else {
					this.$refs.cover.show();
					this.tipsShow = true;
				}
			}
		}
	}
</script>

<style>
	.cell-group {
		margin-bottom: 20upx;
		background-color: #202126FF;
	}

	.cell-bd-view {
		margin-bottom: 8upx;
		color: #fff;
	}

	.cell-bd-view .cell-bd-text {
		font-size: 22upx;
		color: #999;
	}

	.black-text .cell-bd-text {
		font-size: 28upx;
		color: #333;
	}

	.button-bottom {
		padding: 15upx 26upx;
		text-align: right;
		display: block;
	}

	.button-bottom .btn {
		margin-left: 20upx;
	}

	.order-price {
		padding: 10upx 0 20upx;
	}

	.order-price .cell-item {
		border-bottom: none;
		padding-bottom: 0;
		padding-top: 0;
		min-height: 40upx;
	}

	.order-price .cell-bd-view {
		margin-bottom: 0;
	}

	.order-offer .cell-item-hd {
		vertical-align: top;
		padding-top: 8upx;
	}

	.order-offer .cell-item-bd {
		padding: 0;
	}

	.order-promotion {
		font-size: 24upx;
		color: #fff;
		background-color: #ff7159;
		margin: 0 0 4upx 6upx;
		padding: 2upx 10upx;
		display: inline-block;
		float: right;
	}

	.tax_name {}

	.tax_code {}

	.user-head-img-c {
		position: relative;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 20upx;
		box-sizing: border-box;
		display: inline-block;
		float: left;
		border: 1px solid #f3f3f3;
		margin-bottom: 20rpx;
	}

	.user-head-img-tip {
		position: absolute;
		top: -6upx;
		left: -10upx;
		display: inline-block;
		background-color: #FF7159;
		color: #fff;
		font-size: 22upx;
		z-index: 99;
		padding: 0 10upx;
		border-radius: 10upx;
		transform: scale(.8);
	}

	.group-swiper .cell-item .user-head-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.group-swiper .cell-item .user-head-img-c:first-child {
		border: 1px solid #FF7159;
	}

	.uhihn {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 20upx;
		display: inline-block;
		border: 2upx dashed #e1e1e1;
		text-align: center;
		line-height: 80upx;
		color: #d1d1d1;
		font-size: 40upx;
		box-sizing: border-box;
	}

	.group-swiper .cell-item .cell-item-ft .btn {
		font-size: 26upx;
		color: #fff;
		background-color: #FF7159;
		/* padding: 0; */
		text-align: center;
	}

	.add-title-item .cell-item-hd {
		min-width: 20px;
		color: #666;
		font-size: 14px;
	}

	.add-title-item .cell-item-bd {
		margin-left: 0;
	}

	.delivery {
		border-bottom: 1px solid #f3f3f3;
	}

	.th .cell-item-bd {
		display: block;
		flex: 1;
		margin-left: 20rpx;
		padding-right: 0;
	}

	.content-top {
		padding-bottom: 116rpx;
	}

	.tips {
		width: 25rpx;
		height: 25rpx;
		vertical-align: middle;
		margin-left: 6rpx;
		margin-top: 4rpx;
	}

	.tip {
		position: absolute;
		padding: 10rpx;
		left: 20%;
		bottom: 40%;
		width: 288rpx;
		font-size: 22rpx;
		color: #999;
		border-radius: 8rpx;
		border: 2rpx solid #999;
	}

	/* .tip::before {
	  content: " ";
	  position: absolute;
	  left: 44rpx;
	  bottom: -18rpx;
	  transform: translateX(-50%);
	  width: 0;
	  height: 0;
	  border-left: 12rpx solid transparent;
	  border-right: 12rpx solid transparent;
	  border-top: 18rpx solid #999;
	} */
	/deep/.lvv-popup .lvv-popupmark {
		background: transparent !important;
	}
</style>